<!--分享弹窗-->
<template>
  <section class="dialog-more" v-if="isShow">
    <div class="bg" @click="back"></div>
    <div class="cont" @click.stop="">
      <div class="hd">
        <span>分享红友圈</span>
        <div @click.stop="back" class="close">
          <i></i>
          <i></i>
        </div>
      </div>
      <div class="line"></div>
      <div class="bd">
        <div class="title">分享内容：{{ newsTitle }}</div>
        <p class="pdv-2"></p>
        <Textarea placeholder="分享说明" v-model="content"></Textarea>

        <p class="pdv-2"></p>
        <div
          @click.stop="share"
          :class="disable ? 'click-disable' : ''"
          class="default-block-btn mgt-2"
        >
          确认分享
        </div>
      </div>
    </div>
  </section>
</template>

<script>
import { Textarea } from "cube-ui";
export default {
  components: { Textarea },
  name: "shareDialog",
  props: ["newsId", "newsTitle", "type", "listPic","sharePhotoOss"],
  data() {
    return {
      disable: false,
      isShow: true,
      content: "",
    };
  },
  created() {
    this.disable = false;
  },
  methods: {
    getImgUrl(id) {
      return this.tools.getImgUrl(id);
    },
    /*确认分享*/
    share() {
      this.disable = true;
      let params = {
        shareContent: this.content,
        shareContentId: this.newsId,
        shareContentTitle: this.newsTitle,
        sharePhoto: this.listPic,
        source: this.type + "" || 0, // 来源（0 新闻 1 短视频）
        sharePhotoOss:this.sharePhotoOss, //oss地址
      };
      this.tools.showLoading("正在分享...");
      this.fetchService.actionFriendShare(params).then((res) => {
        this.tools.hideLoading();
        if (res.code !== 0) {
          return this.tools.tip(res.message);
        }
        // this.tools.tip("分享成功");
        this.$emit("onSuccess", res, params);
        setTimeout(() => {
          this.disable = false;
        }, 2000);
        this.back();
      });
    },
    show() {
      this.isShow = true;
    },
    back() {
      this.isShow = false;
    },
  },
};
</script>
<style scoped lang="scss">
@import "@/common/stylus/moon.scss";

.dialog-more {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  z-index: 99;
  .bg {
    @include fullImg();
    background: rgba(0, 0, 0, 1);
    opacity: 0.5;
  }
  .cont {
    position: absolute;
    top: 50%;
    left: pxToRem(20px);
    right: pxToRem(20px);
    transform: translateY(-50%);
    background: #fff;
    border-radius: pxToRem(10px);
    padding: pxToRem(25px) pxToRem(40px) pxToRem(40px);
    .hd {
      font-size: pxToRem(30px);
      font-weight: 400;
      color: rgba(51, 51, 51, 1);
      display: flex;
      justify-content: space-between;
      align-items: center;
      .close {
        width: pxToRem(30px);
        height: pxToRem(30px);
        position: relative;
        transform: rotate(45deg);
        i {
          background: #999;
          position: absolute;
        }
        i:first-child {
          top: 50%;
          left: 0;
          margin-top: -1px;
          width: pxToRem(30px);
          height: 2px;
        }
        i:last-child {
          top: 0;
          left: 50%;
          margin-left: -1px;
          height: pxToRem(30px);
          width: 2px;
        }
      }
    }
    .line {
      margin: pxToRem(26px) 0 pxToRem(36px);
      width: 100%;
      height: 1px;
      background: rgba(0, 0, 0, 1);
      opacity: 0.1;
    }
    .bd {
      .title {
        font-size: $defaultFontSize;
      }
    }
  }
}
.click-disable {
  pointer-events: none;
}
</style>
